<!DOCTYPE HTML>

<html>
   <head>
      <title> Grabcut Demo</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
      <script type="text/javascript" src="{{ url_for('static', filename='js/grabcut.js') }}"></script>  
      <script type="text/javascript" src="{{ url_for('static', filename='js/grabcut_demo.js') }}"></script> 
      <style type="text/css">
        .grabcut_res {
          max-height: 300px;
          max-width:300px;
          background-color: grey;
        }
        .grabcut_row {
          border: 1px solid grey;
          border-radius: 15px;
          padding-top: 20px;
          padding-bottom: 20px;
          margin: 15px;
        }
        .title {
          padding: 15px;
          font-weight: bold;
        }
        .header {
          background-color: #C5DDFD;
          padding: 10px;
        }
        .h_text {
          font-weight: bold;
          font-size: 30px;
        }
      </style>
    </head>

    <body> 
      <div class="container-fluid">
          <nav class="navbar navbar-light bg-light header">
              <span class="navbar-brand mb-0 h_text">Interactive Grabcut</span>
            </nav>
        <div id="appending_container"></div>
    </div>
    </body>

</html>